<script setup>
import { ref, reactive, onMounted } from 'vue'

// 搜索条件
const searchForm = reactive({
    keyword: '',
    category: '',
    status: '',
    dateRange: []
})

// 商品分类选项
const categoryOptions = [
    { value: '1', label: '电子产品' },
    { value: '2', label: '服装服饰' },
    { value: '3', label: '食品饮料' },
    { value: '4', label: '家居家装' },
    { value: '5', label: '图书文娱' }
]

// 商品状态选项
const statusOptions = [
    { value: '1', label: '上架中' },
    { value: '0', label: '已下架' },
    { value: '2', label: '售罄' }
]

// 表格数据
const tableData = ref([
    {
        id: 1001,
        image: 'https://via.placeholder.com/60',
        name: '2023新款笔记本电脑轻薄本',
        category: '电子产品',
        price: 4299.00,
        stock: 156,
        sales: 253,
        status: '1',
        createTime: '2023-03-15 14:30:24'
    },
    {
        id: 1002,
        image: 'https://via.placeholder.com/60',
        name: '男士夏季短袖T恤圆领宽松',
        category: '服装服饰',
        price: 89.90,
        stock: 1210,
        sales: 3567,
        status: '1',
        createTime: '2023-04-22 09:15:38'
    },
    {
        id: 1003,
        image: 'https://via.placeholder.com/60',
        name: '有机新鲜水果礼盒装',
        category: '食品饮料',
        price: 199.00,
        stock: 0,
        sales: 1289,
        status: '2',
        createTime: '2023-05-03 16:42:19'
    },
    {
        id: 1004,
        image: 'https://via.placeholder.com/60',
        name: '北欧简约风格实木床1.8米',
        category: '家居家装',
        price: 2380.00,
        stock: 42,
        sales: 97,
        status: '1',
        createTime: '2023-02-28 11:26:35'
    },
    {
        id: 1005,
        image: 'https://via.placeholder.com/60',
        name: '热门小说精选合集(套装5册)',
        category: '图书文娱',
        price: 168.00,
        stock: 320,
        sales: 785,
        status: '0',
        createTime: '2023-01-18 10:52:47'
    }
])

// 分页配置
const pagination = reactive({
    total: 100,
    currentPage: 1,
    pageSize: 10
})

// 批量操作选中的商品ID
const selectedProducts = ref([])

// 表格加载状态
const tableLoading = ref(false)

// 搜索方法
const handleSearch = () => {
    tableLoading.value = true
    // 这里应该是实际的API调用
    setTimeout(() => {
        tableLoading.value = false
        // 模拟搜索结果
        console.log('搜索条件:', searchForm)
    }, 500)
}

// 重置搜索条件
const resetSearch = () => {
    Object.keys(searchForm).forEach(key => {
        if (key === 'dateRange') {
            searchForm[key] = []
        } else {
            searchForm[key] = ''
        }
    })
    handleSearch()
}

// 处理分页变化
const handleCurrentChange = (val) => {
    pagination.currentPage = val
    handleSearch()
}

// 处理每页条数变化
const handleSizeChange = (val) => {
    pagination.pageSize = val
    pagination.currentPage = 1
    handleSearch()
}

// 批量上架
const batchPutOnSale = () => {
    if (selectedProducts.value.length === 0) {
        ElMessage.warning('请至少选择一个商品')
        return
    }
    ElMessageBox.confirm(`确认要上架选中的${selectedProducts.value.length}个商品吗？`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        // 调用上架API
        ElMessage.success('商品上架成功')
    }).catch(() => { })
}

// 批量下架
const batchPutOffSale = () => {
    if (selectedProducts.value.length === 0) {
        ElMessage.warning('请至少选择一个商品')
        return
    }
    ElMessageBox.confirm(`确认要下架选中的${selectedProducts.value.length}个商品吗？`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        // 调用下架API
        ElMessage.success('商品下架成功')
    }).catch(() => { })
}

// 删除商品
const deleteProduct = (id) => {
    ElMessageBox.confirm('确认要删除该商品吗？删除后不可恢复', '警告', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        // 调用删除API
        ElMessage.success('商品删除成功')
    }).catch(() => { })
}

// 编辑商品
const editProduct = (id) => {
    console.log('编辑商品:', id)
    // 跳转到编辑页面或打开编辑弹窗
}

// 获取状态样式
const getStatusType = (status) => {
    switch (status) {
        case '1': return 'success'
        case '0': return 'info'
        case '2': return 'danger'
        default: return 'info'
    }
}

// 获取状态文本
const getStatusText = (status) => {
    switch (status) {
        case '1': return '上架中'
        case '0': return '已下架'
        case '2': return '售罄'
        default: return '未知'
    }
}

onMounted(() => {
    handleSearch()
})
</script>

<template>
    <div class="product-container">

        <!-- 搜索栏 -->
        <el-card class="search-card">
            <el-form :model="searchForm" label-width="80px" :inline="true" size="default" class="responsive-form">
                <el-form-item label="商品名称">
                    <el-input v-model="searchForm.keyword" placeholder="请输入商品名称" clearable />
                </el-form-item>
                <el-form-item label="商品分类">
                    <el-select v-model="searchForm.category" placeholder="请选择分类" clearable>
                        <el-option v-for="item in categoryOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="商品状态">
                    <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
                        <el-option v-for="item in statusOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="创建时间" class="date-form-item">
                    <el-date-picker v-model="searchForm.dateRange" type="daterange" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" />
                </el-form-item>
                <el-form-item class="form-buttons">
                    <el-button type="primary" @click="handleSearch">查询</el-button>
                    <el-button @click="resetSearch">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <!-- 操作栏 -->
        <div class="action-bar">
            <el-button type="primary" icon="Plus">添加商品</el-button>
            <el-button type="success" icon="Top" @click="batchPutOnSale">批量上架</el-button>
            <el-button type="info" icon="Bottom" @click="batchPutOffSale">批量下架</el-button>
            <el-button type="danger" icon="Delete">批量删除</el-button>
            <el-button icon="Upload">导入</el-button>
            <el-button icon="Download">导出</el-button>
        </div>

        <!-- 表格 -->
        <el-card>
            <div class="table-responsive">
                <el-table v-loading="tableLoading" :data="tableData" style="width: 100%"
                    @selection-change="selectedProducts = $event.map(item => item.id)">
                    <el-table-column type="selection" width="55" />
                    <el-table-column prop="id" label="商品ID" min-width="90" />
                    <el-table-column label="商品图片" min-width="100">
                        <template #default="scope">
                            <el-image :src="scope.row.image" :preview-src-list="[scope.row.image]" fit="cover"
                                style="width: 60px; height: 60px" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="商品名称" min-width="200" show-overflow-tooltip />
                    <el-table-column prop="category" label="分类" min-width="100" />
                    <el-table-column label="价格/库存" min-width="130">
                        <template #default="scope">
                            <div>￥{{ scope.row.price.toFixed(2) }}</div>
                            <div>库存: {{ scope.row.stock }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sales" label="销量" min-width="90" />
                    <el-table-column label="状态" min-width="100">
                        <template #default="scope">
                            <el-tag :type="getStatusType(scope.row.status)">
                                {{ getStatusText(scope.row.status) }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" min-width="170" />
                    <el-table-column label="操作" min-width="200" fixed="right">
                        <template #default="scope">
                            <div class="action-buttons">
                                <el-button type="primary" size="small" @click="editProduct(scope.row.id)">编辑</el-button>
                                <el-dropdown size="small">
                                    <el-button size="small">
                                        更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
                                    </el-button>
                                    <template #dropdown>
                                        <el-dropdown-menu>
                                            <el-dropdown-item>查看详情</el-dropdown-item>
                                            <el-dropdown-item v-if="scope.row.status === '0'">上架</el-dropdown-item>
                                            <el-dropdown-item v-if="scope.row.status === '1'">下架</el-dropdown-item>
                                            <el-dropdown-item>复制</el-dropdown-item>
                                            <el-dropdown-item divided @click="deleteProduct(scope.row.id)">
                                                <span style="color: #F56C6C;">删除</span>
                                            </el-dropdown-item>
                                        </el-dropdown-menu>
                                    </template>
                                </el-dropdown>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <!-- 分页 -->
            <div class="pagination-container">
                <el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
                    :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </el-card>
    </div>
</template>

<style scoped>
.product-container {
    padding: 20px;
    width: 100%;
}

.page-title {
    margin-bottom: 20px;
    font-weight: 500;
    color: #303133;
}

.search-card {
    margin-bottom: 20px;
}

.responsive-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.responsive-form .el-form-item {
    margin-right: 0;
    margin-bottom: 10px;
}

.date-form-item {
    min-width: 360px;
}

.action-bar {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
}

.action-buttons {
    display: flex;
    gap: 5px;
}

.pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 1200px) {
    .action-bar {
        flex-wrap: wrap;
    }

    .action-buttons {
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .product-container {
        padding: 10px;
    }

    .responsive-form .el-form-item {
        flex-basis: 100%;
    }

    .date-form-item {
        min-width: 100%;
    }

    .form-buttons {
        display: flex;
        justify-content: flex-end;
        width: 100%;
    }

    .pagination-container {
        justify-content: center;
    }

    :deep(.el-pagination__sizes) {
        display: none !important;
    }
}

@media (max-width: 576px) {
    .action-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .action-buttons {
        flex-direction: column;
    }

    :deep(.el-pagination__jump) {
        display: none !important;
    }
}
</style>